<script setup>
import { ref ,useTemplateRef} from 'vue'
import { articleDeleteArticle, articlGetArticleListService } from '@/api/article'
import { formatDate } from '@/utils/format-date'
import { Delete, Edit } from '@element-plus/icons-vue'
import ChannelSelect from './components/ChannelSelect.vue'
import EditArticleBox from './components/EditArticle.vue'
import ReadArticle from './components/ReadArticle.vue'
import { ElMessage,ElMessageBox } from 'element-plus/es'

// 是否开启加载动画
const isLoading = ref(false)
// 查询文章列表的查询参数对象
const paramsObj = ref({
  // 当前页码数
  pagenum:1,
  // 当前页需要的数据条数
  pagesize:5,
  // 文章分类的id
  cate_id:'',
  // 文章状态-已发布/草稿
  state:''
})
//文章列表数据数组
const articleList = ref([])
// 响应匹配的总条数
const totalNum = ref(0)
const getAllArticles = async ()=>{
  isLoading.value = true
  const res = await articlGetArticleListService(paramsObj.value)
  articleList.value =  res.data.data
  totalNum.value = res.data.total
  isLoading.value = false
}
getAllArticles()
isLoading.value = true
//搜索按钮点击事件
const handleSearch = async ()=>{
  paramsObj.value.pagenum = 1
  getAllArticles()

}
// 重置按钮点击事件
const hanldeReset = ()=>{
  // 重置查询文章列表的查询参数对象数据
  paramsObj.value.pagenum = 1
  paramsObj.value.cate_id = ''
  paramsObj.value.state = ''
  //重新获取数据
  getAllArticles()
}
// 每页条数发生变化时使用的函数
const handleSizeChange = (size)=>{
  paramsObj.value.pagenum = 1
  paramsObj.value.pagesize = size
  getAllArticles()
}
// 当前页码发生变化时使用的函数
const handleCurrentChange = (num)=>{
  paramsObj.value.pagenum = num
  getAllArticles()
}
const editArticleRef = useTemplateRef('editArticleRef')
// 添加文章的逻辑
const addArticle = ()=>{
  editArticleRef.value.open({})

}
// 编辑文章的逻辑
const editArticle = (row)=>{
  editArticleRef.value.open(row)
}
// 删除文章逻辑
const deleteArticle = async (id)=>{
  await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await articleDeleteArticle(id)
  ElMessage({ type: 'success', message: '删除成功' })
  getAllArticles()
}
//来自子组件添加/修改文章后的消息传递
const onSuccess = (type)=>{
  if(type === 'add'){
    //添加文章成功后,重新获取文章列表数据,并将当前页码调至最后一页。
    const lastPageNum = Math.ceil((totalNum.value + 1) / paramsObj.value.pagesize)
    paramsObj.value.pagenum = lastPageNum
  }
    getAllArticles()
    //修改文章数据成功后重新获取文章列表数据,页码为当前文章所在页。
}
// 打开阅读文章抽屉组件的逻辑
const readArticleRef = ref()
const onOpenArticle = (id)=>{
  //id:文章id
  readArticleRef.value.open(id)
}
</script>
<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary" @click="addArticle">发布文章</el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
    <el-form-item label="文章分类:">
      <channel-select v-model:cate_id="paramsObj.cate_id" width="200px"></channel-select>
    </el-form-item>
    <el-form-item label="发布状态:">
      <el-select
      style="width: 200px"
      v-model="paramsObj.state"
      >
        <el-option label="已发布" value="已发布"></el-option>
        <el-option label="草稿" value="草稿"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="hanldeReset">重置</el-button>
    </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="articleList" v-loading="isLoading">
    <el-table-column label="文章标题" prop="title">
      <template #default="{row}">
        <el-link @click="onOpenArticle(row.id)" type="primary" :underline="false">{{ row.title }}</el-link>
      </template>
    </el-table-column>
    <el-table-column label="分类" prop="cate_name"></el-table-column>
    <el-table-column label="发布时间" prop="pub_date">
      <template #default="{row}">
        <!-- 利用作用域插槽获取pub_date进行格式化显示 -->
        {{ formatDate(row.pub_date) }}
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="state"></el-table-column>
    <el-table-column label="操作">
      <template #default="{row,$index }">
        <el-button type="primary" :icon="Edit" circle plain @click="editArticle(row)" />
        <el-button type="danger" :icon="Delete" circle plain @click="deleteArticle(row.id)" />
      </template>
    </el-table-column>
    </el-table>
     <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="paramsObj.pagenum"
      v-model:page-size="paramsObj.pagesize"
      :page-sizes="[2, 3, 4, 5, 10]"
      background
      layout="jumper ,total, sizes, prev, pager, next "
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;justify-content: flex-end;"
    />
    <!-- 抽屉区域 -->
    <edit-article-box ref="editArticleRef" @success="onSuccess"></edit-article-box>
    <!-- 文章阅读的抽屉区域 -->
     <read-article ref="readArticleRef"></read-article>
  </page-container>
</template>
